import React from 'react';
import {inject, observer} from 'mobx-react';
// import {isNumber} from 'lodash';
import {Popover, InputNumber} from 'antd';
import {SketchPicker} from 'react-color';

// import {cssToText, numberPxArray} from '@/common/EditorConfig';

@inject ('editorStore')
@observer
export default class Style extends React.Component {
  // 加粗
  changeBold = fontWeight => {
    const {changeActive} = this.props.editorStore;
    let weight = 'bold';
    if (fontWeight === 'bold') {
      weight = 'normal';
    }
    changeActive (weight, {name: 'font', key: 'fontWeight'});
  };
  // 斜体
  changeStyle = fontStyle => {
    const {changeActive} = this.props.editorStore;
    let style = 'oblique';
    if (fontStyle === 'oblique') {
      style = 'normal';
    }
    changeActive (style, {name: 'font', key: 'fontStyle'});
  };
  // 中划线
  changeDecration = (lineStyle, type) => {
    const {changeActive} = this.props.editorStore;
    let style = 'line-through';
    if (type) {
      // 区分下划线 中划线
      style = 'underline';
      if (lineStyle === 'underline') {
        style = 'none';
      }
    } else {
      if (lineStyle === 'line-through') {
        style = 'none';
      }
    }
    changeActive (style, {name: 'font', key: 'textDecoration'});
  };
  // 对齐
  /**
   * type 0 左对齐 1 居中 2 右对齐
   */
  changeAlign = (align, type) => {
    const {changeActive} = this.props.editorStore;
    let style = 'left';
    switch (type) {
      case 1:
        style = align !== 'center' ? 'center' : 'left';
        break;
      case 2:
        style = align !== 'right' ? 'right' : 'left';
        break;
      default:
    }
    console.log (style);
    changeActive (style, {name: 'font', key: 'textAlign'});
  };
  changeSize = type => {
    const {changeActive, htmlBody} = this.props.editorStore;
    const currentIndex = htmlBody.findIndex (item => item.active);
    let currentHtmlBody = null;

    if (currentIndex > -1) {
      currentHtmlBody = htmlBody[currentIndex];
      changeActive (currentHtmlBody.font.fontSize + type, {
        name: 'font',
        key: 'fontSize',
      });
    }
  };
  // 字体颜色变化
  changeColor = color => {
    const {changeActive} = this.props.editorStore;
    changeActive (
      `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`,
      {name: 'font', key: 'color'}
    );
  };
  // 背景颜色
  changeBgColor = color => {
    const {changeActive} = this.props.editorStore;
    changeActive (
      `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`,
      {name: 'font', key: 'backgroundColor'}
    );
  }
  render () {
    const {htmlBody, changeActive} = this.props.editorStore;
    const currentIndex = htmlBody.findIndex (item => item.active);
    let currentHtmlBody = null;

    if (currentIndex > -1) {
      currentHtmlBody = htmlBody[currentIndex];
    }
    console.log (currentHtmlBody);
    const {
      fontWeight,
      fontStyle,
      textDecoration,
      textAlign,
      marginLeft,
      marginRight,
      lineHeight,
      paddingTop,
      letterSpacing,
      color,
    } = currentHtmlBody.font;
    return (
      <div>
        {/* 粗体 */}
        <a
          className={
            fontWeight === 'bold'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeBold (fontWeight)}
          title="粗体"
        >
          <i className="iconfont-2">&#xe72e;</i>
        </a>
        {/* 斜体 */}
        <a
          className={
            fontStyle === 'oblique'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeStyle (fontStyle)}
          title="斜体"
        >
          <i className="iconfont-2">&#xe731;</i>
        </a>
        {/* 中划线 */}
        <a
          className={
            textDecoration === 'line-through'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeDecration (textDecoration)}
          title="删除线"
        >
          <i className="iconfont-2">&#xe60a;</i>
        </a>
        {/* 下划线 */}
        <a
          className={
            textDecoration === 'underline'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeDecration (textDecoration, true)}
          title="下划线"
        >
          <i className="iconfont-2">&#xe734;</i>
        </a>
        {/* 对齐 */}
        <a
          className={
            textAlign === 'left'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeAlign (textAlign)}
          title="左对齐"
        >
          <i className="iconfont-2 ">&#xe6fe;</i>
        </a>
        <a
          className={
            textAlign === 'center'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeAlign (textAlign, 1)}
          title="居中对齐"
        >
          <i className="iconfont-2 ">&#xe6dd;</i>
        </a>
        <a
          className={
            textAlign === 'right'
              ? 'page-editor-config active'
              : 'page-editor-config'
          }
          onClick={() => this.changeAlign (textAlign, 2)}
          title="右对齐"
        >
          <i className="iconfont-2 ">&#xe71d;</i>
        </a>
        {/* 偏移 */}
        <Popover
          trigger="click(px)"
          title="左偏移"
          content={
            <InputNumber
              defaultValue={marginLeft}
              min={0}
              size="small"
              className="page-editor-font"
              onChange={value => {
                changeActive (value, {name: 'font', key: 'marginLeft'});
              }}
            />
          }
        >
          <a className="page-editor-config" title="左偏移">
            <i className="iconfont-2">&#xe647;</i>
          </a>
        </Popover>
        <Popover
          trigger="click"
          title="右偏移(px)"
          content={
            <InputNumber
              defaultValue={marginRight}
              min={0}
              size="small"
              className="page-editor-font"
              onChange={value => {
                changeActive (value, {name: 'font', key: 'marginRight'});
              }}
            />
          }
        >
          <a className="page-editor-config" title="右偏移">
            <i className="iconfont-2">&#xe645;</i>
          </a>
        </Popover>
        {/* 文本 */}
        <a className="page-editor-config" title="字体加大" onClick={() => {this.changeSize(+2)}}>
          <i className="iconfont-2 ">&#xe65b;</i>
        </a>
        <a className="page-editor-config" title="字体减小" onClick={() => {this.changeSize(-2)}}>
          <i className="iconfont-2 ">&#xe65a;</i>
        </a>
        {/* 文本间距 */}
        <Popover
          trigger="click"
          title="文字间距(px)"
          content={
            <InputNumber
              defaultValue={letterSpacing}
              size="small"
              className="page-editor-font"
              onChange={value => {
                changeActive (value, {name: 'font', key: 'letterSpacing'});
              }}
            />
          }
        >
          <a className="page-editor-config" title="文字间距">
            <i className="iconfont-2 ft-16">&#xe810;</i>
          </a>
        </Popover>
        {/* &#xe65f; */}
        {/* 行高 */}
        <Popover
          trigger="click"
          title="行高(px)"
          content={
            <InputNumber
              defaultValue={lineHeight}
              size="small"
              className="page-editor-font"
              onChange={value => {
                changeActive (value, {name: 'font', key: 'lineHeight'});
              }}
            />
          }
        >
          <a className="page-editor-config" title="行高">
            <i className="iconfont-2 ft-16">&#xe80f;</i>
          </a>
        </Popover>
        {/* 段前距离 */}
        <Popover
          trigger="click"
          title="段前距离(px)"
          content={
            <InputNumber
              defaultValue={paddingTop}
              size="small"
              className="page-editor-font"
              onChange={value => {
                changeActive (value, {name: 'font', key: 'paddingTop'});
              }}
            />
          }
        >
          <a className="page-editor-config" title="段前距离">
            <i className="iconfont-2">&#xe65f;</i>
          </a>
        </Popover>
        {/* 颜色 */}
        <Popover
          overlayClassName="page-editor-color"
          trigger="click"
          placement="bottom"
          content={
            <SketchPicker
              width={230}
              color={color}
              onChangeComplete={this.changeColor}
            />
          }
        >
          <a className="page-editor-config" title="颜色">
            <i className="iconfont-2">&#xe72c;</i>
          </a>
        </Popover>
        
      </div>
    );
  }
}
